<!-- admin/admin/admin_department_form.html -->
{% extends "admin/layout.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card stat-card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ title }}</h5>
                    <a href="{{ url_for('admin.admin_department.department_management') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i> 返回列表
                    </a>
                </div>
                <div class="card-body">
                    <form method="POST" id="departmentForm">
                        {{ form.hidden_tag() }}

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.name.label(class="form-label") }}
                                    {{ form.name(class="form-control" + (' is-invalid' if form.name.errors else '')) }}
                                    {% for error in form.name.errors %}
                                        <div class="invalid-feedback">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.wecom_id.label(class="form-label") }}
                                    {{ form.wecom_id(class="form-control" + (' is-invalid' if form.wecom_id.errors else '')) }}
                                    {% for error in form.wecom_id.errors %}
                                        <div class="invalid-feedback">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">父部门</label>
                                    <div class="tree-selector border rounded p-2 bg-light">
                                        <div class="d-flex justify-content-between mb-2">
                                        </div>

                                        <!-- 树形结构容器 -->
                                        <div class="tree-container" style="max-height: 300px; overflow-y: auto;">
                                            <div class="form-check mb-1">
                                                <input class="form-check-input" type="radio" name="parent_id"
                                                       id="parent_top" value="0" {% if not form.parent_id.data %}checked{% endif %}>
                                                <label class="form-check-label fw-bold" for="parent_top">
                                                    -- 顶级部门 --
                                                </label>
                                            </div>

                                            <!-- 递归树形结构 -->
                                            <div id="departmentTree">
                                                {% for dept in all_departments if not dept.parent_id %}
                                                    {{ render_department_tree(dept, 0) }}
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    {% for error in form.parent_id.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.order_num.label(class="form-label") }}
                                    {{ form.order_num(class="form-control" + (' is-invalid' if form.order_num.errors else '')) }}
                                    {% for error in form.order_num.errors %}
                                        <div class="invalid-feedback">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-save me-1"></i> 保存
                            </button>
                            <button type="reset" class="btn btn-secondary">
                                <i class="fas fa-undo me-1"></i> 重置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% macro render_department_tree(dept, level) %}
<div class="department-node mb-1" data-id="{{ dept.id }}">
    <div class="d-flex align-items-center">
        <span style="width: {{ level * 24 }}px; display: inline-block;"></span>

        {% if dept.children %}
        <button type="button" class="btn btn-sm btn-toggle me-1" data-bs-toggle="collapse"
                data-bs-target="#children-{{ dept.id }}">
            <i class="fas fa-chevron-right"></i>
        </button>
        {% else %}
        <span class="me-4"></span>
        {% endif %}

        <div class="form-check flex-grow-1">
            <input class="form-check-input" type="radio" name="parent_id"
                   id="parent_{{ dept.id }}" value="{{ dept.id }}"
                   {% if form.parent_id.data == dept.id %}checked{% endif %}>
            <label class="form-check-label" for="parent_{{ dept.id }}">
                {{ dept.name }}
                {% if dept.members %}
                <span class="badge bg-light text-dark ms-2">{{ dept.members|length }}人</span>
                {% endif %}
            </label>
        </div>
    </div>

    {% if dept.children %}
    <div class="collapse ms-4" id="children-{{ dept.id }}">
        {% for child in dept.children %}
            {{ render_department_tree(child, level + 1) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endmacro %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 树形结构交互
    document.querySelectorAll('.btn-toggle').forEach(btn => {
        btn.addEventListener('click', function(e) {
            // 阻止事件冒泡和默认行为，避免触发表单提交
            e.preventDefault();
            e.stopPropagation();

            const icon = this.querySelector('i');
            icon.classList.toggle('fa-chevron-right');
            icon.classList.toggle('fa-chevron-down');
        });
    });

    // 全部折叠
    document.getElementById('collapseTree').addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.collapse').forEach(collapse => {
            new bootstrap.Collapse(collapse, {toggle: false}).hide();
        });
        document.querySelectorAll('.btn-toggle i').forEach(icon => {
            icon.classList.remove('fa-chevron-down');
            icon.classList.add('fa-chevron-right');
        });
    });

});
</script>

<style>
.tree-selector {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 1rem;
}

.tree-container {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem;
    background-color: white;
}

.btn-toggle {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.department-node {
    transition: background-color 0.2s;
}

.department-node:hover {
    background-color: rgba(13, 110, 253, 0.05);
}
</style>
{% endblock %}